<template>
  <Sidebar ref="sidebar" :title="$t('outline.title')">
    <!-- <div class="changeBtn" :class="{ isDark }" @click="onChangeToOutlineEdit">
      <span class="icon iconfont-chaojizhiku iconquanping1" />
    </div> -->
    <Outline @scrollTo="onScrollTo" />
  </Sidebar>
</template>

<script>
import Sidebar from "./Sidebar.vue"
import { mapState, mapActions } from "pinia"
import Outline from "./Outline.vue"
import { useMind } from "@mind/store"

import mixin from "./mixin"

// 大纲侧边栏
export default {
  mixins: [mixin],
  components: {
    Sidebar,
    Outline
  },
  data() {
    return {
      sidebarType: "outline"
    }
  },
  computed: {
    ...mapState(useMind, ["isOutlineEdit", "isDark"])
  },

  methods: {
    ...mapActions(useMind, ["setIsOutlineEdit", "setActiveSidebar"]),

    onChangeToOutlineEdit() {
      this.setIsOutlineEdit(true)
    },

    onScrollTo(y) {
      const container = this.$refs.sidebar.getEl()
      const height = container.offsetHeight
      const top = container.scrollTop
      if (y > top + height) {
        container.scrollTo(0, y - height / 2)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.changeBtn {
  position: absolute;
  right: 50px;
  top: 12px;
  cursor: pointer;

  &.isDark {
    color: #fff;
  }
}
</style>
